<template>
<main>
    <div class="box">
        <div class="banner">
            <img src="../assets/img/banner.jpg" alt="banner">
        </div>
        <div class="ptai">
            <img src="../assets/img/banner1.png" alt="banner"> 
        </div>
        <div class="shop">
            <div class="shop-content">
                <div class="imgbox" >
                    <img @mouseover="inImg(0)"
                            v-if="img0" src="../assets/img/mon/1-sel.png" alt="">
                    <img @mouseout="outImg(0)"  v-else src="../assets/img/mon/1.png" alt="">
                </div>
                <div class="imgbox">
                    <img @mouseover="inImg(1)"  v-if="img1" src="../assets/img/mon/2-sel.png" alt="">
                    <img @mouseout="outImg(1)" v-else src="../assets/img/mon/2.png" alt="">
                </div>
                <div class="imgbox">
                    <img @mouseover="inImg(2)"  v-if="img2" src="../assets/img/mon/3.png" alt="">
                    <img @mouseout="outImg(2)" v-else src="../assets/img/mon/3-sel.png" alt="">
                </div>
            </div>
      
        </div>
        <div class="map">
          <img class="map-text" src="../assets/img/text.png" alt="">
           <div class="map-box">
                <img @mouseover="inImg(3)" v-if="map" src="../assets/img/map.png" alt="">
                <img @mouseout="outImg(3)" v-else src="../assets/img/map-sel.png" alt="">
           </div>
        </div>
        <div class="teaching">
            <img src="../assets/img/text1.png" alt="">
            <div class="t-box">
                <div class="item">
                    <img @mouseover="inImg(4)" v-if="img4" src="../assets/img/mon/left.png" />
                    <img @mouseout="outImg(4)" v-else src="../assets/img/mon/right-sel.png" />
                </div>
                <div class="item1">
                    <img @mouseover="inImg(5)" v-if="img5"  src="../assets/img/mon/right.png" />
                    <img @mouseout="outImg(5)" v-else src="../assets/img/mon/left-sel.png" />
                </div>
            </div>
        </div>
        <div class="news">
            <div class="line">
                <img src="../assets/img/righttext.png" alt="">
                <div class="homespan" style="margin-top:20px;margin-left:95px">查看详情</div>
            </div>
            <div class="news-box">  
                <div class="item">
                    <div class="textbox" style="margin-bottom:20px">
                        <div>农业农村部出台《社会资本投资农业农村指引》</div>
                    </div>
                    <img @mouseover="inImg(6)" style="height:250px" v-if="img6" src="../assets/img/qiye/wenhua/1bottom.png" alt="">
                    <img @mouseout="outImg(6)" style="height:250px" v-else src="../assets/img/qiye/bottom-sel.png" alt="">
                </div>
                <div class="item">
                    <img style="margin-bottom:20px;" @mouseover="inImg(7)" v-if="img7" src="../assets/img/qiye/wenhua/top1.png" alt="">
                    <img style="margin-bottom:20px" @mouseout="outImg(7)" v-else src="../assets/img/qiye/12-sel.png" alt="">
                    <div class="textbox">
                        <div style="width:80%">【脱贫攻坚 春耕护航】农讯汇防疫-扶贫两手抓！</div>
                    </div>
                </div>
                <div class="item">
                    <div class="textbox" style="margin-bottom:20px">
                        <div style="width:80%">农业农村部出台《社会资本投资农业农村指引》</div>
                    </div>
                    <img @mouseover="inImg(8)"  style="height:250px" v-if="img8"  src="../assets/img/qiye/wenhua/bottom2.gif" alt="">
                    <img @mouseout="outImg(8)" style="height:250px" v-else  src="../assets/img/qiye/bottom2-sel.png" alt="">
                </div>
            </div>
        </div>
        <div class="wenhua">
            <div class="line">
                <div class="homespan" style="margin-top:20px;margin-left:95px">查看详情</div>
                <img src="../assets/img/lefttext.png" alt="">
            </div>
            <div class="wenhua-box">
                <div class="item">
                    <img @mouseover="inImg(8)" v-if="img8" src="../assets/img/qiye/jinshen.png" />
                    <img @mouseout="outImg(8)" v-else src="../assets/img/qiye/jinshen-sel.png" />
                </div>
                <div class="item">
                    <img @mouseover="inImg(9)" v-if="img9" src="../assets/img/qiye/wenjian.png" />
                    <img @mouseout="outImg(9)" v-else src="../assets/img/qiye/wenjian-sel.png" />
                </div>
                <div class="item">
                    <img @mouseover="inImg(10)" v-if="img10" src="../assets/img/qiye/yuang.png" />
                    <img @mouseover="inImg(10)" v-else src="../assets/img/qiye/yuang-sel.png" />
                </div>
            </div>
            <img class="line-box" src="../assets/img/qiye/line.png" alt="">
        </div>
    </div>


    <section style="margin-top:30px;margin-left:-50px">
        <div class="container">

          <div class="row">
          </div>
        </div> 
    </section>
</main>
</template>

<script>
export default {
    mounted(){
        $('img').on('mousedown',function (e) {
            e.preventDefault()
        })
    },
    data(){
        return{
            img0: true,
            img1: true,
            img2: true,
            img3: true,
            img4: true,
            img5: true,
            map: true,
            img6: true,
            img7: true,
            img8: true,
            img9: true,
            img10: true
        }
    },
    methods:{
        inImg(value){
            if(value == 0){
                this.img0 = !this.img0
            }else if(value == 1){
                this.img1 = !this.img1
            }else if(value == 2){
                this.img2 = !this.img2
            }else if(value == 3){
                this.map = !this.map
            }else if(value == 4){
                this.img4 = !this.img4
            }else if(value == 5){
                this.img5 = !this.img5
            }else if(value == 6){
                this.img6 = !this.img6
            }else if(value == 7){
                this.img7 = !this.img7
            }else if(value == 8){
                this.img8 = !this.img8
            }else if(value == 9){
                this.img9 = !this.img9
            }else if(value == 10){
                this.img10 = !this.img10
            }
        },
        outImg(value){
            if(value == 0){
                this.img0 = !this.img0
            }else if(value == 1){
                this.img1 = !this.img1
            }else if(value == 2){
                this.img2 = !this.img2
            }else if(value == 3){
                this.map = !this.map
            }else if(value == 4){
                this.img4 = !this.img4
            }else if(value == 5){
                this.img5 = !this.img5
            }else if(value == 6){
                this.img6 = !this.img6
            }else if(value == 7){
                this.img7 = !this.img7
            }else if(value == 8){
                this.img8 = !this.img8
            }else if(value == 9){
                this.img9 = !this.img9
            }else if(value == 10){
                this.img10 = !this.img10
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
@import "../assets/css/index.styl";
</style>